import { NavBar, Swiper, SearchBar, Toast, Rate, Popup } from 'antd-mobile';
import { useNavigate, useParams } from 'react-router-dom';
import { useState, useEffect } from 'react'
import { ShopbagOutline, AppstoreOutline, CheckCircleOutline, RightOutline } from 'antd-mobile-icons'
import styles from './detail.less';
import { connect } from 'dva';

const ProductDetail = (props) => {

  const { detail, comments, dispatch } = props;
  const navigate = useNavigate();
  const params = useParams();
  const [visible, setVisible] = useState(false);
  const [showService, setShowService] = useState(false);

  const back = () => {
    navigate(-1);
  };

  const images = [
    detail.goods_image,
    detail.goods_image,
    detail.goods_image,
  ]

  // const comments = [
  //   {
  //     comment_id: 10014,
  //     content: "质量很不错 挺喜欢的",
  //     create_time: "2023-03-21 15:01:35",
  //   },
  //   {
  //     comment_id: 10015,
  //     content: "质量很不错 挺喜欢的",
  //     create_time: "2023-03-21 15:01:35",
  //   },
  //   {
  //     comment_id: 10016,
  //     content: "质量很不错 挺喜欢的",
  //     create_time: "2023-03-21 15:01:35",
  //   },
  // ]

  useEffect(() => {
    const goodsId = params.id
    dispatch({
      type: 'productDetail/getProDetail',
      payload: goodsId
    })
  }, [dispatch])

  useEffect(() => {
    const goodsId = params.id
    dispatch({
      type: 'productDetail/getProComments',
      payload: goodsId
    })
  }, [dispatch])

  const handleClick = () => {
    setShowService(true)
  };

  return (
    <>
      <div className="prodetail">
        <NavBar backArrow={true} onBack={back}>商品详情页</NavBar>

        {/* <van-swipe autoplay="3000" @change="onChange">
        <van-swipe-item v-for="(image, index) in images" key="index">
          <img: src="image" />
        </van-swipe-item>

        <template #indicator>
          <div className="custom-indicator">{{ current + 1}} / {{ images.length }}</div>
        </template>
      </van-swipe> */}
        <Swiper autoplay={true} loop={true} autoplayInterval={2000}>{
          images.map((item, index) => {
            return (
              <Swiper.Item key={index}>
                <img src={item} />
              </Swiper.Item>
            );
          })
        }</Swiper>

        {/* // 商品说明 */}
        <div className="info">
          <div className="title">
            <div className="price">
              <span className="now">￥{detail.line_price_max}</span>
              <span className="oldprice">￥{detail.goods_price_max}</span>
            </div>
            <div className="sellcount">已售{detail.goods_sales}件</div>
          </div>
          <div className="msg text-ellipsis-2">
            {detail.goods_name}
          </div>

          <div className="services" onClick={handleClick}>
            <div className="left-words">
              <span><CheckCircleOutline color='var(--adm-color-danger)' />七天无理由退货</span>
              <span><CheckCircleOutline color='var(--adm-color-danger)' />48小时发货</span>
            </div>
            <div className="right-icon">
              <RightOutline />
            </div>
          </div>
        </div>

        {/* // 商品评价 */}
        <div className="comment">
          <div className="comment-title">
            <div className="left">商品评价 ({comments.length}条)</div>
            <div className="right">查看更多 <RightOutline /> </div>
          </div>
          <div className="comment-list">
            {comments.map((item, index) => {
              return (
                <div className="comment-item" key={item.comment_id}>
                  <div className="top">
                    <img src="http://cba.itlike.com/public/uploads/10001/20230321/a0db9adb2e666a65bc8dd133fbed7834.png" alt="" />
                    <div className="name">神雕大侠</div>
                    <Rate
                      readOnly
                      value={5}
                      style={{
                        '--star-size': '16px',
                      }}
                    />
                  </div>
                  <div className={styles.content}>
                    {item.content}
                  </div>
                  <div className="time">
                    {item.create_time}
                  </div>
                </div>
              )
            })}
          </div>
        </div>

        {/* // 商品描述 */}
        <div className="desc">
          <img src="https://uimgproxy.suning.cn/uimg1/sop/commodity/kHgx21fZMWwqirkMhawkAw.jpg" alt="" />
          <img src="https://uimgproxy.suning.cn/uimg1/sop/commodity/0rRMmncfF0kGjuK5cvLolg.jpg" alt="" />
          <img src="https://uimgproxy.suning.cn/uimg1/sop/commodity/2P04A4Jn0HKxbKYSHc17kw.jpg" alt="" />
          <img src="https://uimgproxy.suning.cn/uimg1/sop/commodity/MT4k-mPd0veQXWPPO5yTIw.jpg" alt="" />
        </div>

        {/* 底部 */}
        <div className="footer">
          <div className="icon-home" onClick={() => { navigate('/login') }}>
            <AppstoreOutline />
            <span>首页</span>
          </div>
          <div className="icon-cart" onClick={() => { navigate('/cart') }}>
            <ShopbagOutline />
            <span>购物车</span>
          </div>
          <div className="btn-add" onClick={() => { setVisible(true) }}>加入购物车</div>
          <div className="btn-buy">立刻购买</div>
        </div>
      </div>

      {/* 弹出层 */}
      <Popup
        visible={visible}
        showCloseButton
        onClose={() => {
          setVisible(false);
        }}
        bodyStyle={{
          borderTopLeftRadius: '8px',
          borderTopRightRadius: '8px',
          minHeight: '40vh',
        }}
        closeOnMaskClick
      >
        <div class="product">
          <div class="product-title">
            <div class="left">
              <img src="http://cba.itlike.com/public/uploads/10001/20230321/8f505c6c437fc3d4b4310b57b1567544.jpg" alt="" />
            </div>
            <div class="right">
              <div class="price">
                <span>¥</span>
                <span class="nowprice">9.99</span>
              </div>
              <div class="count">
                <span>库存</span>
                <span>55</span>
              </div>
            </div>
          </div>
          <div class="num-box">
            <span>数量</span>
            数字框占位
          </div>
          <div class="showbtn" v-if="true">
            <div class="btn" v-if="true">加入购物车</div>
            <div class="btn now" v-else>立刻购买</div>
          </div>
          <div class="btn-none" v-else>该商品已抢完</div>
        </div>
      </Popup>

      {/* 服务model */}
      <Popup
        visible={showService}
        showCloseButton
        onClose={() => {
          setShowService(false);
        }}
        bodyStyle={{
          borderTopLeftRadius: '8px',
          borderTopRightRadius: '8px',
          minHeight: '40vh',
        }}
        closeOnMaskClick
      >
        <NavBar onBack={back} backArrow={false}>服务</NavBar>
        <div className='describe'>
          <div className='up'>
            <div className='i'><CheckCircleOutline fontSize={18} color='var(--adm-color-danger)' /></div>
            <div className='desc'>
              <span>七天无理由退货</span>
              <span>满足相应条件时，消费者可申请7天无理由退货</span>
            </div>
          </div>
          <div className='down'>
            <div className='i'><CheckCircleOutline fontSize={18} color='var(--adm-color-danger)' /></div>
            <div className='desc'>
              <span>48小时发货</span>
              <span>下单后48小时之内发货</span>
            </div>
          </div>
        </div>
      </Popup>
    </>
  );
}

const mapStateToProps = ({ productDetail }) => {
  return {
    ...productDetail
  }
};

export default connect(mapStateToProps)(ProductDetail);